<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('客户订单信息列表')" />
    <th:block th:include="include :: datetimepicker-css" />
    <style type="text/css">
        .bootstrap-table .fixed-table-container .fixed-table-footer .table thead tr th .th-inner {
            padding: .75rem;
            vertical-align: bottom;
            overflow: auto;
            text-overflow: ellipsis;
            white-space: pre-wrap;
        }
        /*#bootstrap-table {*/
        /*    !* 添加横向滚动条 *!*/
        /*    overflow-x: auto;*/
        /*    white-space: nowrap;*/
        /*    table-layout: fixed;*/
        /*    word-break: break-all;*/
        /*    word-wrap: break-word;*/
        /*}*/
        /*#bootstrap-table td, #bootstrap-table th {*/
        /*    white-space: normal;*/
        /*}*/
    </style>
</head>
<body class="gray-bg">
     <div class="container-div">
        <div class="row">
            <div class="col-sm-12 search-collapse">
                <form id="formId">
                    <div class="select-list">
                        <ul>
                            <li>
                                <label>客户名称：</label>
                                <select name="customerName" th:with="si=${cuslist}">
                                    <option value="">所有</option>
                                    <option th:each="cus : ${si}" th:text="${cus.customerName}" th:value="${cus.customerName}"></option>
                                </select>
                            </li>
                            <li class="select-time">
                                <label style="width: 100px;">订单日期区间：</label>
                                <input type="text" class="time-input" placeholder="开始日期" name="orderStartDate" style="width: 100px;"/>
                                <span>~</span>
                                <input type="text" class="time-input" placeholder="结束日期" name="orderEndDate" style="width: 100px;"/>
                            </li>
                            <li>
                                <label>订单号：</label>
                                <input type="text" name="customerOrder"/>
                            </li>
                            <li>
                                订单状态：
                                <select name="orderStatus" th:with="type=${@dict.getType('cus_order_status')}">
                                    <option value="">所有</option>
                                    <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                                </select>
                            </li>
                            <li>
                                <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
                                <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                            </li>
                        </ul>
                    </div>
                </form>
            </div>

            <div class="btn-group-sm" id="toolbar" role="group">
                <a class="btn btn-warning" onclick="$.table.exportExcel()" shiro:hasPermission="promanage:trail:export">
                    <i class="fa fa-download"></i> 导出
                </a>
                <p style="color: red;">
                    <br />
                    可查询数据范围：2024年1月开始生效的且4月开始投片的订单
                </p>
            </div>
            <!-- table-layout:fixed;word-break:break-all;word-wrap:break-word;  style="white-space: nowrap;"-->
            <div class="col-sm-12 select-table table-striped" >
                <table id="bootstrap-table"></table>
            </div>
        </div>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: datetimepicker-js" />
    <script th:inline="javascript">
        var editFlag = [[${@permission.hasPermi('promanage:trail:edit')}]];
        var removeFlag = [[${@permission.hasPermi('promanage:trail:remove')}]];
        var cusOrderStatus = [[${@dict.getType('cus_order_status')}]];
        var prefix = ctx + "promanage/cusordertrail";

        var columns = [
            {
                field: 'NO',
                title: "序号",
                align: 'center',
                formatter: function (value, row, index) {
                    return $.table.serialNumber(index);
                }
            },
            {
                field: 'id',
                title: '编号',
                align: 'center',
                visible: false
            },
            {
                field: 'timeFlag',
                title: '日期时间标识',
                align: 'center',
                visible: false
            },
            {
                field: 'customerName',
                title: '客户名称',
                align: 'center',
                sortable: true,
                footerFormatter:function (value) {
                    return "总计：";
                }
            },
            {
                field: 'orderTime',
                title: '订单日期',
                align: 'center',
                sortable: true
            },
            {
                field: 'customerOrder',
                title: '订单号',
                align: 'center',
                sortable: true,
                formatter: function(value, row, index) {
                    return '<a class="" onclick="cusOrderClick(\'' + row.customerOrder + '\')">' + row.customerOrder + '</a>';
                }
            },
            {
                field: 'orderPriority',
                title: '订单优先级',
                align: 'center',
                sortable: true
            },
            {
                field: 'orderLot',
                title: '订单片数',
                align: 'center',
                sortable: true,
                footerFormatter:function (value) {
                    // 统计已投总片数
                    var sumQty = 0;
                    for (var i in value) {
                        sumQty += parseFloat(value[i].orderLot);
                    }
                    return sumQty;
                }
            },
            {
                field: 'orderStatus',
                title: '订单状态',
                align: 'center',
                formatter: function(value, row, index) {
                    return $.table.selectDictLabel(cusOrderStatus, value);
                }
            },
            {
                field: 'orderDuration',
                align: 'center',
                title: '订单持续时长(天)',
                sortable: true
            },
            {
                field: 'orderWorkTime',
                align: 'center',
                title: '订单生产时长(天)',
                sortable: true
            },
            {
                field: 'startLotQty',
                title: '已投片数',
                align: 'center',
                sortable: true,
                formatter: function(value, row, index) {
                    return '<a class="" onclick="startLotQtyClick(\'' + row.customerOrder + '\')">' + row.startLotQty + '</a>';
                },
                footerFormatter:function (value) {
                    // 统计已投总片数
                    var sumQty = 0;
                    for (var i in value) {
                        sumQty += parseFloat(value[i].startLotQty);
                    }
                    return sumQty;
                }
            },
            {
                field: 'leaveLotQty',
                title: '未投片数',
                align: 'center',
                sortable: true,
                footerFormatter:function (value) {
                    // 统计未投总片数
                    var sumQty = 0;
                    for (var i in value) {
                        sumQty += parseFloat(value[i].leaveLotQty);
                    }
                    return sumQty;
                }
            },
            {
                field: 'shipLotQty',
                title: '入库片数',
                align: 'center',
                sortable: true,
                formatter: function(value, row, index) {
                    var comClass = "COM";
                    return '<a class="" onclick="shipLotQtyClick(\'' + row.customerOrder + '\',\'' + comClass + '\')">' + row.shipLotQty + '</a>';
                },
                footerFormatter:function (value) {
                    // 统计入库总片数
                    var sumQty = 0;
                    for (var i in value) {
                        sumQty += parseFloat(value[i].shipLotQty);
                    }
                    return sumQty;
                }
            },
            {
                field: 'orderShipLotCt',
                align: 'center',
                title: '出片CT(天)',
                sortable: true
            },
            {
                field: 'scrapQty',
                title: '报废片数',
                align: 'center',
                sortable: true,
                formatter: function(value, row, index) {
                    return '<a class="" onclick="scrapQtyClick(\'' + row.customerOrder + '\')">' + row.scrapQty + '</a>';
                },
                footerFormatter:function (value) {
                    // 统计报废总片数
                    var sumQty = 0;
                    for (var i in value) {
                        sumQty += parseFloat(value[i].scrapQty);
                    }
                    return sumQty;
                }
            },
            {
                title: '操作',
                align: 'center',
                formatter: function(value, row, index) {
                    var actions = [];
                    actions.push('<a class="btn btn-success btn-xs" href="javascript:void(0)" onclick="cusOrderDetail(\'' + row.customerOrder + '\')"><i class="fa fa-align-justify"></i>详情</a> ');
                    return actions.join('');
                }
            }
        ];
        var options = {
            url: prefix + "/list",
            exportUrl: prefix + "/export",
            modalName: "客户订单信息",
            columns: columns,
            sortName: "orderTime",
            sortOrder: "desc",
            striped: true,
            showFooter: true,
            pagination: false,
            sidePagination: "client",
            fixedColumns: true,
            fixedNumber: 6,
            height: 440, // 设置表格高度，固定表头
            onDblClickRow: onDblClickRow,
            footerStyle: footerStyle
            // onPostBody: function () {
            //     // 合并页脚
            //     merge_footer();
            // }
        };

        $(function() {
            $.table.init(options);
        });
        
        function merge_footer() {
            var footer_tbody = $('.fixed-table-footer table thead');
            var footer_tr = footer_tbody.find('>tr');
            var footer_td = footer_tr.find('>th');
            var footer_td_1 = footer_tr.eq(0);
            for (var i = 1; i < footer_td.length - 1; i++) {
                footer_td.eq(i).hide();
            }
            footer_td_1.attr('colspan', footer_td.length - 1).show();
            footer_td_1.attr('width', "910px").show();
        }

        function footerStyle(column) {
            return {
//         	    userBalance: {
//         	        classes: 'class'
//         	    },
                startLotQty: {
                    css: { color: 'red', 'font-weight': 'normal' }
                },
                leaveLotQty: {
                    css: { color: 'red', 'font-weight': 'normal' }
                },
                shipLotQty: {
                    css: { color: 'red', 'font-weight': 'normal' }
                },
                scrapQty: {
                    css: { color: 'red', 'font-weight': 'normal' }
                },
                orderLot: {
                    css: { color: 'red', 'font-weight': 'normal' }
                }
            }[column.field]
        }

        function cusOrderDetail(customerOrder) {
            var url = prefix + "/orderdetail?customerOrder=" + customerOrder;
            var options = {
                title: '客户订单跟踪详情',
                btn: 0,
                url: url,
                full: true,
                width: 800,
                height: $(window).height() - 10
            };
            $.modal.openOptions(options);
        }

        // 投片点击详情
        function startLotQtyClick(customerOrder) {
            var url = "promanage/cusordertrailmo" + "/modetail?customerOrder=" + customerOrder;
            var options = {
                title: '批次详情',
                btn: 0,
                url: url,
                full: true,
                width: 800,
                height: $(window).height()
            };
            $.modal.openOptions(options);
        }

        // 出片点击详情
        function shipLotQtyClick(customerOrder,comClass) {
            var url = "promanage/cusordertrailmo" + "/modetail?customerOrder=" + customerOrder + "&comClass=" + comClass;
            var options = {
                title: '批次详情',
                btn: 0,
                url: url,
                full: true,
                width: 800,
                height: $(window).height()
            };
            $.modal.openOptions(options);
        }

        function onDblClickRow(row, $element){
            var url = prefix + "/orderdetail?customerOrder=" + row.customerOrder;
            var options = {
                title: '客户订单跟踪详情',
                btn: 0,
                url: url,
                full: true,
                width: 800,
                height: $(window).height() - 10
            };
            $.modal.openOptions(options);
        }

        // 客户订单超链接
        function cusOrderClick(customerOrder) {
            var url = "promanage/cusorderdetail" + "/orderdetail?customerOrder=" + customerOrder;
            var options = {
                title: '订单详情',
                btn: 0,
                url: url,
                full: true,
                width: 800,
                height: $(window).height() - 50
            };
            $.modal.openOptions(options);
        }
        // 报废片数超链接
        function scrapQtyClick(customerOrder) {
            var url = "promanage/scrapinfo" + "/link?customerOrder=" + customerOrder;
            var options = {
                title: '报废详情',
                btn: 0,
                url: url,
                full: true,
                width: 800,
                height: $(window).height() - 50
            };
            $.modal.openOptions(options);
        }
    </script>
</body>
</html>